<template>
    <div>
         <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/rule' }">生成排班计划 </el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/scheduling' }">新增排班规则</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>常数列表</el-breadcrumb-item> -->
    </el-breadcrumb>
    <!-- Card卡片 -->
    <el-card>
          <el-row  type="flex" class="text" justify="center">
              <el-col :span="4" >新增排班规则</el-col>
          </el-row>
 <!-- 科室选择下拉列表框 -->
 <form :inline="true"><el-row type="flex" justify="center" :gutter="20">
      <el-col :span="10">科室选择
         <el-select size="mini" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in deptList"  
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
<!-- 挂号级别下拉列表框 -->
      </el-col>
       <el-col :span="10">挂号级别
         <el-select size="mini" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in registleveList"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="mini">查询</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="mini" >清空</el-button> 
      </el-col>
    </el-row>
    </form>
<!--排班规则 table表格 -->
  <el-table class="table"    :data="dataList" border stripe>
        <!-- 首列添加插槽 获取当前行id -->
        <el-table-column label="选择" prop="id" width="65">
             <template slot-scope="select">
                   <el-checkbox @change="checked=>checkboxSelect(checked,select.row.id)"></el-checkbox>
             </template>
        </el-table-column>
        <el-table-column prop="rulename" label="医生名称"> </el-table-column>
<!-- 循环 获取列名 -->
        <el-table-column v-for="(item,index)  in dayList" :key="index" :label="item">
<!-- 每列单元格里面加复选框 绑定行和列 -->
         <template slot-scope="select">
            <el-checkbox true-label="1" false-label="0" v-model="weeklist[select.row.id][index]" @change="checked=>checkboxChange(checked,select.row.id)"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
<!-- Pagination分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
<!-- 规则名称  -->
  <el-form class="rule" :inline="true" >
     <el-form-item label="规则名称"  >
       <el-input size="mini" wide="100px"></el-input></el-form-item>
                     <el-form-item > <el-button type="primary" size="mini" >取消</el-button>
         <el-button type="warning" size="mini" @click="addButtonClick" >保存</el-button></el-form-item>
      
        </el-form>
    </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //查询所有科室列表信息
          total:0,
          queryInfo:{
        startTime: "",
        endTime: "",
          pageNum:1,
          pageSize:2
        },
        deptList:[],
        registleveList:[],
 //定义列名       
        dayList:[
            "星期一上午","星期一下午", "星期二上午", "星期二下午", "星期三上午","星期三下午","星期四上午","星期四下午","星期五上午","星期五下午",
            "星期六上午","星期六下午","星期天上午","星期天下午"
        ],
//定义week单元格数组
        weeklist:[],  
        dataList:[],
  saveFrom:{
        ruleName:"",
        rules:[]
      },             

        }
        
    },
    created(){
        this.getDataList();
        
    },
    methods: {
//分页查询UserName和Week        
    async getDataList(){
        const { data : res }=await this.$http.get(`rule/queryByPage`,{ params: this.queryInfo})
        if (res.meta.status !== 200) {
        return this.$message.error("初次查询信息失败");
      }
       this.dataList = res.rulelist;
      this.total = res.total;
      this.dataList.forEach(value => {
      this.weeklist[value.id] = value.week.split("");
      });
      },
//查询科室      
      async getDeptList() {
      const { data: res } = await this.$http.get("department/queryDeptName");
      this.deptList = res;
    },
//查询挂号
    async getRegistleveList() {
      const { data: res } = await this.$http.get("/registlevel/queryAll");
      this.registleveList = res;
    },
//添加Rule    
async addButtonClick(){
       const confirmResult = await this.$confirm(
        "是否添加该条规则？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消添加");
      }
      this.saveFrom.rules=[]
      this.addRuleIds.forEach(id => {
        this.dataList.forEach(data=>{
          if(data.id==id){
            this.saveFrom.rules.push(data)
          }
        })
      });
      const { data: res } = await this.$http.post("rule/addRules",this.saveFrom);
      if (res.meta.status !== 200) {
        return this.$message.error("添加规则失败！");
      }
      this.$message.success(res.meta.msg);
      this.getDataList();
    },

//分页按钮功能
         handleSizeChange(size) {
      this.queryInfo.pageSize = size;
//重新查询科室信息
     this.getDataList();
    },
    handleCurrentChange(page) {
      // console.log(page)
      this.queryInfo.pageNum = page;
      //重新查询科室信息
      this.getDataList();
    },    
     checkboxChange(checked, row) {
       let temp = this.weeklist[row]
       let merge = ''
      this.$set(this.weeklist,row,temp)//要赋值的对象，index ，value
      //将数组拼成字符串
      temp.forEach(value => {
        merge+=value
      })
      //应用到datalist中
      this.dataList.forEach(value => {
        if(value.id == row){
           value.week = merge
        }
      });
    },
    
   checkboxSelect(checked, row){
        if (checked) {
        //如果被选中把id添加到删除列表中
        this.addRuleIds.push(row);   
       }else {
        //否则从列表中移除
        for (let index = 0; index <this.addRuleIds.length; index++) {
          if(this.addRuleIds[index]==row)
            this.addRuleIds.splice(index);
        }
      }
    }    
     
    },
}
</script>

<style lang="less" scoped>
.text{
    margin-bottom: 40px;
}

.table{
    font-size: 11px;
}

.rule{
  padding-top: 20px;
  margin-top: 0%;
  margin-left: 150px;
  text-align:"center"
}
</style>